<template>
  <header class="box-header">
    <span class="title"> {{ title }} </span>
    <section class="box-tools">
      <slot />
    </section>
  </header>
</template>

<script>
export default {
  name: 'BoxTitle',
  props: {
    title: { type: String, default: '标题' }
    // useTools: { type: Boolean, default: false }
  },
  data() {
    return {

    }
  }
}
</script>

<style lang="scss" scoped>
@import '~@/styles/variables.scss';

.title {
  position: relative;
  display: inline-block;
  font-size: $const + 4;
  font-weight: bolder;
  display: inline-block;
  padding-left: 10px;
  // margin-bottom: 6px;
  &::before {
    position: absolute;
    content: " ";
    top: 50%;
    left: 0;
    width: 6px;
    height: $const + 5px;
    transform: translateY(-50%);
    background-color: $menuActiveText;
  }
}
.box-header {
  position: relative;
  line-height: 3 * $const;
  .box-tools {
    position: absolute;
    line-height: normal;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    // top: 9px;
    // right: 10px;
    // height: 32px;
    // line-height: 1;
  }
}
</style>
